<template>
  <div class="swiper">
    <div
      :class="item.className"
      v-for="item in state.source"
      :key="item.id"
      :style="item.sty"
    >
      {{ item.id }}
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, watch } from "vue";
export default {
  name: "swiper",
  setup({ source, current }) {
    console.log(source, current);

    // onMounted

    const state = reactive({
      source,
      current,
    });
    //
    const computed = (current, source) => {
      let len = source.length;
      current < 0 ? 0 : current >= len ? current - len : current;
      console.log(current);

      let tem1 = current - 2,
        tem2 = current - 1,
        tem3 = current,
        tem4 = current + 1,
        tem5 = current + 2;
      tem1 < 0 ? (tem1 = tem1 + len) : null;
      tem2 < 0 ? (tem2 = tem2 + len) : null;
      tem4 >= len ? (tem4 = tem4 - len) : null;
      tem5 >= len ? (tem5 = tem5 - len) : null;

      // console.log(source);
      return source.map((item, index) => {
        let transform = `translate(-50%,-50%) scale(.55)`,
          className = `silde`,
          zIndex = "0";
        switch (index) {
          // 选在正中间
          case tem3:
            className = `silde active`;
            (transform = `translate(-50%,-50%) scale(1)`), (zIndex = "3");
            break;
          case tem1:
            (transform = `translate(-200%,-50%) scale(.7)`), (zIndex = "1");
            break;

          case tem2:
            (transform = `translate(-130%,-50%) scale(.85)`), (zIndex = "2");
            break;
          case tem4:
            (transform = `translate(30%,-50%) scale(.85)`), (zIndex = "2");
            break;

          case tem5:
            (transform = `translate(100%,-50%) scale(.7)`), (zIndex = "1");
            break;

          default:
            console.log(index);
            break;
        }

        return {
          id: index + 1,
          className,
          sty: {
            zIndex,
            transform,
          },
        };
      });
    };

    watch(
      () => state.current,
      (ov, nv) => {
        state.source = computed(nv, state.source);
      }
    );
    setInterval(() => {
      state.current + 1 >= state.source.length
        ? (state.current = 0)
        : state.current++;

    }, 1000);

    state.source = computed(current, state.source);
    // console.log(state.source);
    return {
      state,
    };
  },
  props: {
    current: {
      type: Number,
      default: 0,
    },
    // 元数据
    source: {
      type: Array,
      default: [],
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./swiper.scss";
</style>